<template>
    <van-swipe class="component-swipe" :autoplay="auto || 3000">
        <van-swipe-item v-for="(item, key) in options" :key="key">
            <router-link :to="item.to || ''">
                <img :src="item.src || item"
                     :style="{width: width? width/10 + 'rem': '100%',
                     height: height? height/10+'rem': 'auto'}">
            </router-link>
        </van-swipe-item>
    </van-swipe>
</template>

<style lang="less">
    @import '../style/variable';

    .component-swipe{
        a{
            display: block;
        }
        img{
            display: block;
        }
        .van-swipe__indicators{
            bottom: 1.3rem;
        }
        .van-swipe__indicator{
            height: .2rem;
            width: 1.2rem;
            border-radius: 0;
        }
        .van-swipe__indicator--active{
            background-color: @color-white;
        }
    }
</style>

<script>
    import {Swipe, SwipeItem} from 'vant'
    export default {
        props: ['auto', 'options', 'width', 'height'],
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
        },
    }
</script>